<template>
	<!-- 1. 页面主容器 -->
	<view class="index-page-container" @touchstart="handleCloseOverlay">

		<!-- 2. 【关键变动】统一的吸顶容器 -->
		<view class="unified-sticky-container" :class="{ 'is-active': isHeaderSticky }">
			<!-- 吸顶后显示的搜索栏 -->
			<view class="header-container-sticky header-container">
				<view class="header-sticky is-active">
					<view class="header-top">
						<view class="header-top-left">
							<view class="header-top-left-icon">
								<u-icon name="arrow-left" color="#000" size="44rpx" @click="onBack()" bold></u-icon>
							</view>
							<view class="header-top-left-address" @click="navigateToCitySelect">
								<view class="header-top-right-location"> {{cityName}} </view>
							</view>
							<image class="clickDown" src="@/static/index/native-gameplay/down.png" mode=""></image>
						</view>
						<view class="header-search-sticky">
							<u--input class="header-search-ipt" placeholder="搜索更多景点、美食、活动等" prefixIcon="search"
								prefixIconStyle="font-size: 44rpx;color: #4D4D56;padding:0 20rpx 0 30rpx"
								placeholderStyle="font-size: 26rpx;color: #4D4D56;font-weight:400" border="none"
								v-model="inputVal" clearable confirmType="search"></u--input>
						</view>
						<view class="search" @click="loadData(true)">
							搜索
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 4. 页面主要内容 (可滚动) -->
		<view class="scrollable-content">
			<view class="header">
				<view class="header-top">
					<view class="header-top-left">
						<view class="header-top-left-icon">
							<u-icon name="arrow-left" color="#000" size="44rpx" @click="onBack()" bold></u-icon>
						</view>
						<image class="header-top-left-titleImage" src="@/static/index/native-gameplay/headerTitle.png"
							mode="aspectFit">
						</image>

					</view>
					<view class="header-top-right">
						<view class="weather-left">
							33
						</view>
						<view class="weather-middle">
							<view class="weather-middle-top">
								/28℃
							</view>
							<view class="weather-middle-bottom">
								烈日炎炎
							</view>
						</view>

						<view class="weather-right">
							<image src="/static/index/native-gameplay/SunnyDay.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="header-search">
					<view class="header-top-left-address" @click="navigateToCitySelect">
						<view class="header-top-right-location"> {{cityName}} </view>
					</view>
					<image class="clickDown" src="@/static/index/native-gameplay/down.png" mode=""></image>
					<view class="header-search-unSticky">
						<u--input class="header-search-ipt" placeholder="搜索更多景点、美食、活动等" prefixIcon="search"
							prefixIconStyle="font-size: 44rpx;color: #4D4D56;padding:0 20rpx 0 30rpx"
							placeholderStyle="font-size: 26rpx;color: #4D4D56;font-weight:400" border="none"
							v-model="inputVal" clearable confirmType="search" @confirm="loadData(true)"></u--input>
					</view>
					<view class="search" @click="loadData(true)">
						搜索
					</view>

				</view>
			</view>
			<!-- 1. 顶部堆叠轮播 -->
			<view class="summer-plan-swiper">
				<u-swiper :list="summerPlanImages" height="160" imgMode="aspectFill" radius="10" :autoplay="true"
					circular :indicator="true" indicatorMode="dot" @click="navigateToBanner" :lazy-load="true"
					:load-when-needed="true" indicatorActiveColor="#ffaa0c"></u-swiper>
				<view class="swiper-gradient-transition"></view>
			</view>

			<!-- 标签选项卡 -->
			<u-sticky :customNavHeight="getNavBarHeight()" @fixed="onTabsFixed" @unfixed="onTabsUnfixed">
				<view class="tabsList">
					<!-- 吸顶时显示文字tabs -->
					<view v-if="isTabsSticky" class="tabs-text-container">
						<view class="tabs-text-item" v-for="(item,index) in tabsList" :key="index"
							@click="handleClickTabs(item)" :class="{ 'active': item.selected }">
							{{item.name}}
						</view>
					</view>

					<!-- 非吸顶时显示图片tabs -->
					<view v-else class="tabs-image-container">
						<view class="tabsList-item" v-for="(item,index) in tabsList" :key="index"
							@click="handleClickTabs(item)">
							<view class="tabsList-item-img">
								<image :src="item.selected ? item.imgUrl : item.imgUrl_hidden" mode=""></image>
							</view>
							<view class="tabsList-item-title"
								:class="item.selected ? 'tabsList-item-title-show' : 'tabsList-item-title-hidden'">
								{{item.name}}
							</view>
							<view class="tabsList-item-top" v-if="item.selected">
								<image src="/static/index/native-gameplay/go.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</u-sticky>

			<view class="Explore-local-community-wrapper" @touchstart="handleContentTouchStart"
				@touchend="handleContentTouchEnd" @touchmove="handleContentTouchMove">
				<!-- 2. 下方瀑布流 (复用现有组件) -->
				<!-- 	<waterfall-posts :left-list="nativeGameplayData.leftList" :right-list="nativeGameplayData.rightList"
				:active-long-press-post-id="activeLongPressPostId" @itemClick="item => $emit('itemClick', item)"
				@like="item => $emit('like', item)" @longPress="id => $emit('longPress', id)"
				@touchEnd="$emit('touchEnd')" /> -->

				<waterfall-posts :left-list="nativeGameplayData.leftList" :right-list="nativeGameplayData.rightList"
					:active-long-press-post-id="activeLongPressPostId" @itemClick="navigateToPostDetail"
					@closeOverlay="handleCloseOverlay" @longPress="handleLongPress" @touchEnd="handleTouchEnd"
					@like="handleLikePost" />

				<!-- 3. 加载更多提示 -->
				<u-loadmore :status="nativeGameplayData.loadStatus" bg-color="#fff" />
			</view>
		</view>
		<richPostDetail :show="showRichPostDetail" @close="showRichPostDetail = false" :postData="currentDetail" />
	</view>
</template>

<script>
	import WaterfallPosts from '@/components/index/waterfall-posts/waterfall-posts.vue';
	import {
		getPosts,
		getSoment,
		postCancelLike,
		postClientLike
	} from '@/request/api.js';
	import config from '@/config/index.js';

	export default {
		components: {
			WaterfallPosts
		},
		props: {
			// 长按帖子的ID，用于显示特效
			activeLongPressPostId: {
				type: [String, Number],
				default: null
			},
		},
		computed: {
			cityName() {
				return this.$store.state.cityInfo.name
			},
		},
		data() {
			return {
				summerPlanImages: [],
				nativeGameplayData: {
					leftList: [],
					rightList: [],
					page: 1,
					pageSize: 10,
					isLoading: false,
					loadStatus: 'loadmore'
				},
				tabsList: [{
						name: '综合',
						imgUrl: '/static/index/native-gameplay/first-show.png',
						imgUrl_hidden: '/static/index/native-gameplay/first-hidden.png',
						selected: true
					},
					{
						name: '亲子游',
						imgUrl: '/static/index/native-gameplay/second-show.png',
						imgUrl_hidden: '/static/index/native-gameplay/second-hidden.png',
						selected: false
					},
					{
						name: '携老游',
						imgUrl: '/static/index/native-gameplay/third-show.png',
						imgUrl_hidden: '/static/index/native-gameplay/third-hidden.png',
						selected: false
					},
					{
						name: '青春游',
						imgUrl: '/static/index/native-gameplay/fourth-show.png',
						imgUrl_hidden: '/static/index/native-gameplay/fourth-hidden.png',
						selected: false
					},
					{
						name: '自驾游',
						imgUrl: '/static/index/native-gameplay/fifth-show.png',
						imgUrl_hidden: '/static/index/native-gameplay/fifth-hidden.png',
						selected: false
					}
				],
				categoryId: 2,
				// 添加tab滚动位置记录
				tabScrollPositions: {
					2: 0, // 综合tab的滚动位置
					11: 0, // 亲子游tab的滚动位置
					12: 0, // 携老游tab的滚动位置
					13: 0, // 青春游tab的滚动位置
					14: 0 // 自驾游tab的滚动位置
				},
				tabHasScrolled: {
					2: false, // 综合tab是否滚动过
					11: false, // 亲子游tab是否滚动过
					12: false, // 携老游tab是否滚动过
					13: false, // 青春游tab是否滚动过
					14: false // 自驾游tab是否滚动过
				},
				isSwitchingTab: false, // 标记是否正在切换tab
				contentTouchStartX: 0,
				contentTouchEndX: 0,
				contentTouchStartY: 0,
				contentTouchEndY: 0,
				contentTouchStartTime: 0,
				contentTouchEndTime: 0,
				isContentSwiping: false,
				tabSwitchCooldown: false,
				currentPageScrollTop: 0,
				// tabs吸顶的阈值
				tabsStickyThreshold: 170,
				// 记录tabs是否处于吸顶状态
				isTabsSticky: false,
				publicHeight: 0, //当前公共区域的滚动高度
				currentDetail: {},
				showRichPostDetail: false,
				isHeaderSticky: false,
				inputVal: '', //顶部输入框
			};
		},

		onReady() {
			this.calculateOffsetTop();
		},
		onLoad() {
			this.loadData(true);
			this.getBanner();
		},
		onReachBottom() {
			this.loadData(false);
		},
		onPageScroll: function(e) {
			let scrollTop = e.scrollTop;
			let shouldBeSticky = scrollTop > 10;
			if (this.isHeaderSticky !== shouldBeSticky) {
				this.isHeaderSticky = shouldBeSticky;
			}
			this.currentPageScrollTop = scrollTop;
			// 记录头部轮播图距离顶部的距离，目前页面滚动到170的时候，tabs吸顶
			if (scrollTop < this.tabsStickyThreshold) {
				this.publicHeight = scrollTop
			} else {
				// 记录当前分类的滚动位置
				this.tabScrollPositions[this.categoryId] = scrollTop - Number(this.publicHeight);
			}

			// 标记当前分类是否已经滚动过
			if (scrollTop > 0) {
				this.tabHasScrolled[this.categoryId] = true;
			}
		},

		methods: {
			navigateToCitySelect() {
				uni.navigateTo({
					url: '/pages_sub/common/city/city-select'
				});
			},
			handleLikePost(item) {
				const isLiked = item.isLiked;
				const api = isLiked ? postCancelLike : postClientLike;

				// UI即时反馈
				item.isLiked = !isLiked;
				item.likeCount += isLiked ? -1 : 1;

				api({
					postId: item.id,
					userId: this.$store.state.userInfo.userId
				}).catch(() => {
					// 失败时回滚
					item.isLiked = isLiked;
					item.likeCount += isLiked ? 1 : -1;
				});
			},
			getNavBarHeight() {
				const systemInfo = uni.getSystemInfoSync();
				return (systemInfo.statusBarHeight || 20) + 30;
			},

			// tabs吸顶状态变化
			onTabsFixed() {
				this.isTabsSticky = true;
			},

			onTabsUnfixed() {
				this.isTabsSticky = false;
			},

			// 获取状态栏高度
			getStatusbarHeight() {
				const systemInfo = uni.getSystemInfoSync();
				return systemInfo.statusBarHeight || 0;
			},

			handleCloseOverlay() {
				if (this.activeLongPressPostId !== null) {
					setTimeout(() => {
						this.activeLongPressPostId = null;
					}, 100);
				}
			},

			handleLongPress(postId) {
				this.activeLongPressPostId = postId;
			},

			handleTouchEnd() {},

			navigateToPostDetail(item) {
				this.currentDetail = item
				this.showRichPostDetail = true
			},

			// 动态获取header的高度
			calculateOffsetTop() {
				this.$nextTick(() => {
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select('.tabsList').boundingClientRect(rect => {
							console.log(rect.height, 'rect');
						}).exec();
					}, 800);
				});
			},

			// 轮播图接口
			async getBanner() {
				try {
					const res = await getSoment();
					if (res.data && res.data.code === 200) {
						let images = [];
						if (res.data.data.imgUrl) {
							if (typeof res.data.data.imgUrl === 'string') {
								images = res.data.data.imgUrl
									.split(',')
									.map(url => url.trim())
									.filter(url => url && url.length > 0);
								this.summerPlanImages = images
							}
						}
					}
				} catch (error) {
					console.error('获取轮播图失败:', error);
					this.summerPlanImages = [{
							image: '/static/index/local/banner3.png'
						},
						{
							image: '/static/index/local/banner.png'
						}
					];
				}
			},

			navigateToBanner(item) {
				uni.navigateTo({
					url: `/pages_sub/common/general-activity/general-activity`,
					success: (res) => res.eventChannel.emit('acceptDataFromOpenerPage', {
						item: item
					})
				});
			},

			formatApiData(item) {
				const coverImage = (item.files && item.files.length > 0 && item.files[0].fileUrl) ? (item.files[0].fileUrl
					.startsWith('http') ? item.files[0].fileUrl : config.cdnURL + item.files[0].fileUrl) : '';
				const authorAvatar = item.avatar ? (item.avatar.startsWith('http') ? item.avatar : config.cdnURL + item
					.avatar) : '/static/demo/avatar_default.png';
				return {
					id: item.id,
					image: coverImage,
					title: item.content,
					author: {
						avatar: authorAvatar,
						name: item.nickName || '匿名用户'
					},
					isLiked: item.isLiked,
					likeCount: item.likeCount,
					hotness: item.viewCount,
					...item
				};
			},

			async loadData(isRefresh = false) {
				const data = this.nativeGameplayData;
				if (data.isLoading || (!isRefresh && data.loadStatus === 'nomore')) return;
				data.isLoading = true;
				data.loadStatus = 'loading';

				if (isRefresh) {
					data.page = 1;
					data.leftList = [];
					data.rightList = [];
				}

				const params = {
					userId: this.$store.state.userInfo.userId,
					queryType: 1,
					categoryId: this.categoryId,
					pageNum: data.page,
					pageSize: data.pageSize,
					cityName: this.cityName,
					content: this.inputVal
				};

				try {
					const res = await getPosts(params);
					if (res.data && res.data.code === 200) {
						const formattedPosts = (res.data.rows || []).map(this.formatApiData);

						formattedPosts.forEach(post => {
							if (data.leftList.length <= data.rightList.length) data.leftList.push(post);
							else data.rightList.push(post);
						});

						const hasMore = formattedPosts.length === data.pageSize;
						data.loadStatus = hasMore ? 'loadmore' : 'nomore';
						if (hasMore) data.page++;
					} else {
						data.loadStatus = 'loadmore';
					}
				} catch (error) {
					data.loadStatus = 'loadmore';
				} finally {
					data.isLoading = false;
				}
			},

			handleClickTabs(item) {
				// 获取点击的tab对应的分类ID
				let targetCategoryId;

				switch (item.name) {
					case '综合':
						targetCategoryId = 2;
						break;
					case '亲子游':
						targetCategoryId = 11;
						break;
					case '携老游':
						targetCategoryId = 12;
						break;
					case '青春游':
						targetCategoryId = 13;
						break;
					case '自驾游':
						targetCategoryId = 14;
						break;
					default:
						targetCategoryId = 2; // 默认为综合
				}

				// 如果点击的是当前已选中的tab，直接返回
				if (this.categoryId === targetCategoryId) return;

				// 标记正在切换tab
				this.isSwitchingTab = true;

				// 先更新选中状态
				this.tabsList.forEach((info) => {
					info.selected = false;
					if (info.name == item.name) {
						info.selected = true;
					}
				});

				// 更新分类ID
				this.categoryId = targetCategoryId;

				this.loadData(true);

				// 恢复目标tab的滚动位置
				this.$nextTick(() => {
					setTimeout(() => {
						let targetScrollTop = 0;

						// 如果目标tab已经滚动过，恢复其滚动位置
						if (this.tabHasScrolled[this.categoryId]) {
							targetScrollTop = this.tabsStickyThreshold + (this.tabScrollPositions[this
								.categoryId] || 0);
						}
						// 如果目标tab未滚动过，但当前tabs是吸顶状态，则保持吸顶
						else if (this.isTabsSticky) {
							targetScrollTop = this.tabScrollPositions[this.categoryId] + this
								.tabsStickyThreshold;
						}

						// 执行滚动
						if (targetScrollTop > 0) {
							uni.pageScrollTo({
								scrollTop: targetScrollTop,
								duration: 0
							});
							this.currentPageScrollTop = targetScrollTop;
						}

						setTimeout(() => {
							this.isSwitchingTab = false;
						}, 100);
					}, 50);
				});
			},

			onBack() {
				uni.navigateBack()
			},

			handleContentTouchStart(event) {
				this.contentTouchStartX = event.touches[0].clientX;
				this.contentTouchStartY = event.touches[0].clientY;
				this.contentTouchStartTime = new Date().getTime();
				this.isContentSwiping = false;
			},

			// content区域触摸移动事件
			handleContentTouchMove(event) {
				// 可以在这里添加滑动过程中的效果
			},

			// content区域触摸结束事件
			handleContentTouchEnd(event) {
				this.contentTouchEndX = event.changedTouches[0].clientX;
				this.contentTouchEndY = event.changedTouches[0].clientY;
				this.contentTouchEndTime = new Date().getTime();
				this.handleContentSwipeGesture();
			},

			// 处理content区域的滑动手势
			handleContentSwipeGesture() {
				const swipeDistanceX = this.contentTouchEndX - this.contentTouchStartX;
				const swipeDistanceY = Math.abs(this.contentTouchEndY - this.contentTouchStartY);
				const swipeTime = this.contentTouchEndTime - this.contentTouchStartTime;
				const swipeThreshold = 50;

				// 添加防抖控制
				if (this.tabSwitchCooldown) return;

				if (Math.abs(swipeDistanceX) > swipeThreshold &&
					swipeTime < 300 &&
					Math.abs(swipeDistanceX) > swipeDistanceY * 1.5) {

					this.tabSwitchCooldown = true;
					this.isContentSwiping = true;

					if (swipeDistanceX > 0) {
						this.switchToPreviousTab();
					} else {
						this.switchToNextTab();
					}

					// 重置滑动状态
					setTimeout(() => {
						this.isContentSwiping = false;
						this.tabSwitchCooldown = false;
					}, 300);
				}
			},

			// 切换到上一个tab
			switchToPreviousTab() {
				const currentIndex = this.tabsList.findIndex(item => item.selected);
				if (currentIndex > 0) {
					const previousItem = this.tabsList[currentIndex - 1];
					this.handleClickTabs(previousItem);
				}
			},

			// 切换到下一个tab
			switchToNextTab() {
				const currentIndex = this.tabsList.findIndex(item => item.selected);
				if (currentIndex < this.tabsList.length - 1) {
					const nextItem = this.tabsList[currentIndex + 1];
					this.handleClickTabs(nextItem);
				}
			},
		}
	};
</script>
<style lang="scss" scoped>
	// 公共变量
	$primary-color: #000;
	$secondary-color: rgba(0, 0, 0, 1);
	$text-light: rgba(77, 77, 86, 1);
	$background-gradient: linear-gradient(to right, rgba(255, 243, 208, 1) 0%, rgba(223, 243, 255, 1) 100%);
	$white: #fff;
	$border-color: #ccc;
	$border-radius: 20rpx;

	// 公共mixins
	@mixin flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	@mixin text-ellipsis {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	// 主容器
	.index-page-container {
		min-height: 100vh;
		width: 100%;
	}

	// ==================== 吸顶部分样式 ====================
	// 吸顶容器
	.unified-sticky-container {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 998;
		background-color: $white;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
		padding-top: var(--status-bar-height);

		&.is-active {
			visibility: visible;
			opacity: 1;
		}
	}

	// 吸顶头部
	.header-sticky {
		background-color: $white;
		box-sizing: border-box;
		padding-bottom: 20rpx;

		.header-top {
			margin: 0 30rpx;
			height: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.header-top-left {
				display: flex;
				align-items: center;

				.header-top-left-icon {
					margin: 3rpx 0;
					@include flex-center;
				}

				.header-top-left-address {
					font-size: 30rpx;
					font-weight: 400;
					min-width: 80rpx;
					@include flex-center;
				}

				.clickDown {
					width: 26rpx;
					height: 26rpx;
					margin-top: 0;
					margin-left: 4rpx;
					@include flex-center;

					image {
						width: 26rpx;
						height: 26rpx;
					}
				}
			}

			.header-search-sticky {
				flex: 1;
				margin-left: 20rpx;
				border: 1rpx solid #ccc;
				border-radius: 50rpx;
				overflow: hidden;
				height: 100%;

				::v-deep .u-input {
					height: 100%;
					width: 100%;
				}
			}

			.search {
				font-size: 26rpx;
				padding: 0 0 0 20rpx;
			}
		}
	}

	// ==================== 非吸顶部分样式 ====================
	// 普通头部
	.header {
		background: $background-gradient;
		box-sizing: border-box;
		padding-top: var(--status-bar-height);

		.header-top {
			margin: 0 27rpx;
			height: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.header-top-left {
				display: flex;
				align-items: center;

				.header-top-left-icon {
					margin: 3rpx 0;
					@include flex-center;
				}

				.header-top-left-titleImage {
					width: 190rpx;
					height: 50rpx;
				}
			}

			.header-top-right {
				display: flex;
				align-items: center;
				height: 50rpx;

				.weather-left {
					line-height: 50rpx;
					font-size: 40rpx;
					font-weight: 500;
					color: $secondary-color;
					@include flex-center;
				}

				.weather-middle {
					margin-left: 10rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.weather-middle-top {
						font-size: 20rpx;
						font-weight: 400;
						color: $secondary-color;
						line-height: 24rpx;
						margin-bottom: 5rpx;
					}

					.weather-middle-bottom {
						font-size: 18rpx;
						font-weight: 400;
						color: $secondary-color;
						line-height: 16rpx;
					}
				}

				.weather-right {
					margin-left: 10rpx;
					width: 42rpx;
					height: 46rpx;
					@include flex-center;

					image {
						width: 42rpx;
						height: 46rpx;
					}
				}
			}
		}

		// 普通头部的搜索框
		.header-search {
			margin: 20rpx 30rpx 0 30rpx;
			// padding-left: 44rpx;
			padding-bottom: 20rpx;
			height: 60rpx;
			display: flex;
			align-items: center;

			.header-top-left-address {
				font-size: 30rpx;
				font-weight: 400;
				min-width: 80rpx;
				@include flex-center;
			}

			.clickDown {
				width: 26rpx;
				height: 26rpx;
				margin-left: 4rpx;
				@include flex-center;

				image {
					width: 26rpx;
					height: 26rpx;
				}
			}

			.header-search-unSticky {
				flex: 1;
				margin-left: 20rpx;
				border: 1rpx solid #ccc;
				border-radius: 50rpx;
				overflow: hidden;
				height: 100%;

				::v-deep .u-input {
					height: 100%;
					width: 100%;
				}
			}

			.search {
				font-size: 26rpx;
				padding: 0 0 0 20rpx;
			}
		}
	}

	// 轮播图区域
	.summer-plan-swiper {
		position: relative;
		padding: 0 30rpx 20rpx;
		background: $background-gradient;
		background-color: $white;

		.swiper-gradient-transition {
			height: 20rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(to top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 100%);
		}
	}

	// tabs列表
	// tabs列表容器
	.tabsList {
		background-color: $white;

		// 图片tabs样式（非吸顶状态）
		.tabs-image-container {
			display: flex;
			height: 144rpx;
			padding: 30rpx 30rpx 0;
			gap: 20rpx;

			.tabsList-item {
				flex: 1;
				text-align: center;
				position: relative;

				.tabsList-item-img {
					width: 100%;
					height: 132rpx;
					border-radius: 10rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
						display: block;
					}
				}

				.tabsList-item-title {
					position: absolute;
					bottom: 14rpx;
					left: 0;
					right: 0;
					border-radius: 0 0 10rpx 10rpx;
					text-align: center;
					@include text-ellipsis;
					padding: 0 10rpx;
					box-sizing: border-box;
				}

				.tabsList-item-title-show {
					height: 56rpx;
					line-height: 56rpx;
					color: $secondary-color;
					font-size: 26rpx;
					font-weight: 700;
				}

				.tabsList-item-title-hidden {
					height: 56rpx;
					line-height: 56rpx;
					color: $secondary-color;
					font-size: 24rpx;
					font-weight: 400;
				}

				.tabsList-item-top {
					position: absolute;
					top: -20rpx;
					left: 88rpx;
					right: 0;

					image {
						width: 48rpx;
						height: 44rpx;
					}
				}
			}
		}

		// 文字tabs样式（吸顶状态）
		.tabs-text-container {
			display: flex;
			height: 80rpx;
			align-items: center;
			padding: 0 30rpx;

			.tabs-text-item {
				flex: 1;
				text-align: center;
				font-size: 30rpx;
				color: #666;
				font-weight: 400;

				&.active {
					color: #000;
					font-weight: 700;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						bottom: -10rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 60rpx;
						height: 6rpx;
						background: linear-gradient(to right, rgba(255, 170, 12, 1), rgba(250, 225, 62, 1));
						border-radius: 3rpx;
					}
				}
			}
		}
	}

	// 内容容器
	.Explore-local-community-wrapper {
		min-height: 100vh;
	}

	// tabs导航链接（如果使用）
	.tabsListRow-sticky-links {
		margin-top: 20rpx;
		padding: 10rpx 30rpx;
		background-color: $white;

		.tabsListStyle {
			box-sizing: border-box;
			display: flex;
			width: 100%;
			height: 60rpx;

			.tabsListStyle-box {
				flex: 1;
				text-align: center;
				padding: 10rpx 0;
				cursor: pointer;
				position: relative;

				.tabsListStyle-name {
					height: 40rpx;
					line-height: 40rpx;
					font-size: 27rpx;
					font-weight: 500;
					position: relative;
					z-index: 2;

					&.selected {
						font-weight: 800;
					}
				}

				.tabsListStyle-line {
					height: 40rpx;
					position: absolute;
					top: 30rpx;
					left: 50%;
					transform: translateX(-50%);
					z-index: 1;

					image {
						width: 114rpx;
						height: 20rpx;
						display: block;
					}
				}
			}
		}
	}
</style>